<!--
 * @Author: 137 '1432417996@qq.com'
 * @Date: 2025-05-15 01:21:24
 * @LastEditors: 137 '1432417996@qq.com'
 * @LastEditTime: 2025-05-15 21:32:00
 * @FilePath: \starter-3\components\homepage\adBox.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-skeleton :loading="adsLoading" class="banner" animated :throttle="{ leading: 500, initVal: true }">
        <template #template>
            <el-skeleton-item variant="image" style="width: 100%;height: 100%;" />
        </template>
        <template #default>
            <div class="banner">
                <div class="search-type-ul">
                    <ul>
                        <li @click="goAdLink(item)" v-show="item.locType === '1'" v-for="(item, index) in adLinks"
                            :key="index">{{
                                item.name }}
                        </li>
                    </ul>
                </div>
                <div class="search-box">
                    <el-input v-model="input1" style="" @keyup.enter="handleEnter" placeholder="请输入关键词"
                        :suffix-icon="Search">
                        <template #prepend>
                            <el-select v-model="searchType" style="width: 120px">
                                <el-option :label="item.name" :value="item.name" :key="index"
                                    v-for="(item, index) in searchTypeList" />
                            </el-select>
                        </template>
                    </el-input>
                </div>
                <div class="search-type-ul bottom">
                    <ul>
                        <li @click="goAdLink(item)" v-for="(item, index) in adLinks" :key="index"
                            v-show="item.locType === '2'">{{
                                item.name
                            }}
                        </li>
                    </ul>
                </div>
            </div>
        </template>
    </el-skeleton>
    <div class="fixed-a" v-if="showFixedAd && floatAds?.length > 0">
        <div class="close-icon" @click="showFixedAd = false">
            <el-icon><CloseBold /></el-icon>
        </div>
        <div v-for="(item, index) in floatAds.slice(0, 2)" :key="index" class="float-ad-list">
            <div class="left-title">
                <div class="line-clamp-2">{{ item.name }}</div>
                <div class="float-a-btn" @click="goAdLink(item)">立即查看</div>
            </div>
            <div class="right-img">
                <img :src="item.imageUrl" alt="">
            </div>
        </div>
    </div>
</template>

<script setup>
import { CloseBold, Search } from '@element-plus/icons-vue'
import {
    getHomeAds, getSearchBar
} from "@/api/homePage";
onMounted(() => {
    // getHomeAdsFun();
    // getSearchBarFun();
    
})

const showFixedAd = ref(true)

const handleEnter = () => {
    searchTypeList.value.forEach(item => {
        if (searchType.value === item.name) {
            window.open(item.url + input1.value, "_blank");
        }
    })
}

// 跳转广告链接
const goAdLink = (data) => {
    window.open(data.url, "_blank");
}


/*************************************广告数据********************************************/
const adLinks = ref([]);
const floatAds = ref([]);
const adsLoading = ref(true)

const getHomeAdsFun = () => {
    getHomeAds().then(res => {
        // scrollAds.value = res.data?.scrollAds;
        adLinks.value = res.data?.adLinks;
        floatAds.value = res.data?.floatAds;
        adsLoading.value = false;
    })
}

const getHomeAdsFunSSR = async () => {
    const getHomeAdsData = await getApi('/home/ads');
    console.log('getHomeAdsData', getHomeAdsData)
    adLinks.value = getHomeAdsData.data?.adLinks;
    floatAds.value = getHomeAdsData.data?.floatAds;
    adsLoading.value = false;
}


const searchType = ref(null)
const searchTypeList = ref([])

// 搜索引擎
const getSearchBarFun = async () => {
    getSearchBar().then(res => {
        searchTypeList.value = res.data.engines;
        searchType.value = res.data?.engines[0]?.name;
    })
}

const getSearchBarFunSSR = async () => {
    const getSearchBarData = await getApi('/home/search-bar');
    searchTypeList.value = getSearchBarData.data.engines;
    searchType.value = getSearchBarData.data?.engines[0]?.name;
}

const input1 = ref(null);

getHomeAdsFunSSR();
getSearchBarFunSSR();

</script>

<style scoped></style>
